<template>
	<view id="property">
		<view class="box">
			<view class="wait">待缴金额</view>
			<view class="fee">¥3000.00</view>
			<view class="address">
				<uni-icons type="location-filled" size="20"></uni-icons>
				<text>南航碧桂园小区01栋5单元401</text>
			</view>
			<view class="button">
				<navigator url="/pages/Living/payRecord/payRecord" hover-class="navigator-hover">
					<button style="background: #e6f1ff;color: #006eff;">缴费记录</button>
				</navigator>
				<navigator url="/pages/Living/addPay/addPay" hover-class="navigator-hover">
					<button>缴费</button>
				</navigator>
			</view>
		</view>

		<view class="box">
			<view class="wait">待缴金额</view>
			<view class="fee">¥3000.00</view>
			<view class="address">
				<uni-icons type="location-filled" size="20"></uni-icons>
				<text>南航碧桂园小区01栋5单元401</text>
			</view>
			<view class="button">
				<navigator url="/pages/Living/addPay/addPay" hover-class="navigator-hover">
					<button style="background: #e6f1ff;color: #006eff;">缴费记录</button>
				</navigator>
				<navigator url="/pages/Living/addPay/addPay" hover-class="navigator-hover">
					<button>缴费</button>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	#property {
		.box {
			margin: 30rpx auto;
			height: 400rpx;
			width: 680rpx;
			border-radius: 8rpx;
			border: 1rpx solid #f5f5f5;
			box-shadow: 0rpx 0rpx 20rpx 0rpx #f5f5f5;

			.button {
				display: flex;
				justify-content: space-around;
			}

			
			.button :last-child {
				background-color: #006eff;
				color: white;
				border-radius: 8rpx;
			}

			.wait {
				padding: 25rpx;
			}

			.fee {
				padding: 0 0 35rpx 25rpx;
				color: #f46363;
			}

			.address {
				color: #9a9a9a;
				padding: 10rpx 0 25rpx 25rpx;
			}
		}

		button {
			width: 300rpx;
			font-size: 30rpx;
		}
	}
</style>
